<template>
  <div>
    <div :style="{height: toolbarHei +'px'}"></div>
    <nut-navbar title="选择终端" left-text="返回" left-show @click-back="clickLeft"></nut-navbar>
    <nut-searchbar
        v-model="searchModel.keyWord"
        placeholder="搜索终端"
        @search="search"
        @change="search"
        @clear="clear"
    >
      <template #rightout>
        <div style="padding-top:5px;">
          <Search2 @click="search"></Search2>
        </div>
      </template>

    </nut-searchbar>
    <div style="height: calc(100vh - 130px);overflow: auto">
      <fresh-load ref="freshRef" @action="action" :search-model="searchModel" url="app/getCustomerList">
        <div class="item" v-for="(item,index) in state.list" :key="index" @click="chose(item)">
          <div class="name">{{item.name}}</div>
          <div class="link">
            <div>电话：{{item.linkMobile}}</div>
            <div style="margin-left: 20px;">联系人：{{item.linkName}}</div>
          </div>
          <div class="address">地址：{{item.address}}</div>
        </div>
      </fresh-load>
    </div>
  </div>
</template>
<script setup>
// 零售 选择客户
import {useGlobal} from "@/stores/useGlobal";
import { Search2} from "@nutui/icons-vue";
import bus from "@/utils/bus";
import {computed, onActivated, ref} from "vue";
import FreshLoad from "@/components/freshLoad.vue";
import {useRouter} from "vue-router";
const global = useGlobal()
const state = ref({
  loading: false,
  list: [],
})
const router = useRouter()
const searchModel = ref({
  keyWord: ''
})
const freshRef = ref(null)
onActivated(() => {
  getList()
})
const toolbarHei = computed(() => { return global.statusBarHeight })
const clickLeft = () => {
  router.go(-1)
}
const clear = () => {  search('')}
const action = (arr) => {
  state.value.list = arr
}
const search = () => {
  getList()
}

const getList = () => {
   freshRef.value.getList()
}
const chose = (row) => {
  bus.$emit('choseContact', row)
  router.go(-1)
}
</script>

<style scoped lang="scss">
.item {
  margin:10px 5px 0 5px;
  background-color: white;
  padding: 10px;
  border-radius: 6px;
  .name {
    font-size: 15px;
    font-weight: 500;
    color: #6b6d71;
  }
  .link {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 400;
    color: #6b6d71;
    display: flex;
  }
  .address {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 400;
    color: #6b6d71;
  }
  &:active {
    background-color: rgba(0,0,0,0.05);
  }
}

</style>